<template>
  <div class="goods">
    <page-search
      :searchFormConfig="searchFormConfig"
      @resetBtnClick="handleResetClick"
      @queryBtnClick="handleQueryClick"
    ></page-search>
    <page-content
      :content-config="contentConfig"
      pageName="goods"
      ref="pageContentRef"
      @newBtnClick="handleNewBtnClick"
      @editBtnClick="handleEditBtnClick"
    >
      <template #oldPrice="scope">
        {{ '￥' + scope.row.oldPrice }}
      </template>
      <template #newPrice="scope">
        {{ '￥' + scope.row.newPrice }}
      </template>
      <template #image="scope">
        <el-image
          style="width: 60px; height: 60px"
          :src="scope.row.imgUrl"
          :preview-src-list="[scope.row.imgUrl]"
        ></el-image>
      </template>
      <template #status="scope">
        <el-button
          :type="scope.row.status ? 'success' : 'danger'"
          size="mini"
          >{{ scope.row.status ? '充足' : '紧缺' }}</el-button
        >
      </template>
    </page-content>
    <page-modal
      :modalConfig="modalConfig"
      pageName="goods"
      ref="pageModalRef"
      :defaultInfo="defaultInfo"
    ></page-modal>
  </div>
</template>

<script lang="ts" setup>
import { contentConfig } from './config/content.config'
import { searchFormConfig } from './config/search.config'
import { modalConfig } from './config/modal.config'
import usePageSearch from '@/hooks/usePageSearch'
import usePageModal from '@/hooks/usePageModal'

const { pageContentRef, handleQueryClick, handleResetClick } = usePageSearch()

const { pageModalRef, defaultInfo, handleNewBtnClick, handleEditBtnClick } =
  usePageModal()
</script>

<style scoped></style>
